<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  <style media="screen">
    #view{
      width: 200;
      height: 100;
      overflow: hidden;
      position: absolute;
    }
    .aa{
      background: #eee;
      width: 200;
      height: 100;
      left: 0;
      position: absolute;
    }
    .bb{
      background: SkyBlue;
      width: 200;
      height: 100;
      left: 200;
      position: absolute;
    }
    .cc{
      background: #263;
      width: 200;
      height: 100;
      left: 400;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="view">
    {{inp}}
    <input type="text" name="" v-model="inp" value="">
    <input type="text" name="" v-on:input="inp2($event)" :value="inp">
    {{chec}}
    <input type="checkbox" v-model="chec">
    {{b}}
    <input type="radio" v-model="b" value="vvv">
    {{b}}
    <input type="radio" v-model="b"  value="bbbbb">
    <br>
    {{seleted}}
    <select v-model="seleted" multiple>
      <option >AA</option>
      <option >BB</option>
      <option value="DD">CC</option>
    </select>
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el:"#view",
      data:{
        inp:"",
        chec:"aaa",
        b:"bbbb",
        seleted:"BB"
      },
      methods:{
        inp2(event){
          this.inp = event.target.value;
        }
      }
    })

  </script>
</body>

</html>
